<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="新建菜品角标" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <custom-wd-input
        required
        custom-input-class="text-align-right"
        label="标签名称"
        placeholder="例如：店长推荐"
        placeholder-class="text-align-right"
      />
      <custom-wd-input
        c-class="mt-3"
        readonly
        custom-input-class="text-align-right"
        label="归属"
        placeholder="门店"
        placeholder-class="text-align-right"
      />
      <view class="mt-2 flex items-center justify-between px-[10px]">
        <wd-text text="已关联菜品（3）" color="#333" size="14px" />
        <view>
          <wd-button type="text">新增菜品</wd-button>
        </view>
      </view>
      <view class="mt-3">
        <wd-cell title="鱼香肉丝" class="rounded-lg">
          <wd-icon name="delete" color="#666" size="16" />
        </wd-cell>
      </view>
    </scroll-view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="primary" :round="false" class="flex-1">确定</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
